<template>
  <div>
    <div class="album">
      <img :src="hotImg" />
      <div class="songList">
        <h4>热门50首</h4>
        <ul>
          <li
            class="item"
            v-for="(item, index) in hot50"
            :key="item.id"
            @dblclick="playSong(item.id)"
          >
            <span class="index">{{ index + 1 }}</span>
            <span class="action"><i class="iconfont icon-aixin-xian"></i></span>
            <span class="songName">
              <i class="songname">{{ item.name }}</i>
              <span class="icon" v-show="item.mv > 0" @click="toWatch(item.mv)"
                ><i class="iconfont icon-video"></i
              ></span>
              <span class="vip" v-show="item.fee == 1"
                ><i class="iconfont icon-VIP"></i
              ></span>
            </span>
            <span class="time">{{ getSongTime(item.dt) }}</span>
          </li>
        </ul>
        <span class="getAllHot" @click="loadAllHot()" ref="loadHot"
          >加载全部50首</span
        >
      </div>
    </div>
    <div class="album" v-for="(album, index1) in albums" :key="album.id">
      <img :src="album.picUrl" />
      <div class="songList">
        <h4>{{ album.name }}</h4>
        <ul>
          <li
            class="item"
            v-for="(item, index) in albumDeatil[index1]"
            :key="item.id"
            @dblclick="playSong(item.id)"
          >
            <span class="index">{{ index + 1 }}</span>
            <span class="action"><i class="iconfont icon-aixin-xian"></i></span>
            <span class="songName">
              <i class="songname">{{ item.name }}</i>
              <span class="icon" v-show="item.mv > 0" @click="toWatch(item.mv)"
                ><i class="iconfont icon-video"></i
              ></span>
              <span class="vip" v-show="item.fee == 1"
                ><i class="iconfont icon-VIP"></i
              ></span>
            </span>
            <span class="time">{{ getSongTime(item.dt) }}</span>
          </li>
        </ul>
      </div>
    </div>
    <span class="loadMore" @click="loadMore()">加载更多</span>
  </div>
</template>

<script>
import { getHot50API, getSingerAlbumAPI, getAlbumAPI } from "@/api";
export default {
  name: "SingerSong",
  data() {
    return {
      hotImg: require("@/assets/images/hot50.png"),
      hot50: [], //热门50首
      albums: [], //专辑列表
      albumOffset: 0, //专辑分页
      albumDeatil: [], //每张专辑歌曲
    };
  },
  methods: {
    //获取歌手热门50首歌曲
    async getHot50(limit) {
      const res = await getHot50API({ id: this.id });
      if (res.data.code == 200) this.hot50 = res.data.songs.slice(0, limit);
      else alert("获取歌手热门歌曲失败");
    },
    //处理多位歌手
    getAllsinger(arr) {
      let singers = "";
      arr.forEach((item) => {
        singers += item.name;
        singers += "/";
      });
      return singers.slice(0, singers.length - 1);
    },
    //处理歌曲时间  参数单位毫秒
    getSongTime(time) {
      let secondSum = Math.floor(time / 1000);
      let min = Math.floor(secondSum / 60);
      let second = secondSum % 60;
      if (min < 10) {
        min = "0" + min;
      }
      if (second < 10) {
        second = "0" + second;
      }
      return min + ":" + second;
    },
    // 获取歌手专辑
    async getSingerAlbum() {
      const res = await getSingerAlbumAPI({
        id: this.id,
        limit: 5,
        offset: this.albumOffset,
      });
      this.albums = this.albums.concat(res.data.hotAlbums);
      let songRes = {};
      res.data.hotAlbums.forEach(async (item) => {
        songRes = await getAlbumAPI({ id: item.id });
        this.albumDeatil.push(songRes.data.songs);
      });
    },
    // 加载更多
    loadMore() {
      this.albumOffset += 5;
      this.getSingerAlbum();
    },
    //播放歌曲
    playSong(id) {
      this.$store.dispatch("play/updateSongId", id);
    },
    // 加载热门50首
    loadAllHot() {
      this.getHot50(50);
      this.$refs.loadHot.style.display = "none";
    },
    // 去看mv
    toWatch(id) {
      this.$router.push({
        name: "watch",
        query: {
          id,
        },
      });
    },
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
  },
  created() {
    this.getHot50(10);
    this.getSingerAlbum();
  },
};
</script>

<style lang="less" scoped>
ul {
  width: 100%;
  font-size: 13px;
  color: #333;
  li {
    display: block;
    height: 35px;
    width: 100%;
    display: flex;
    user-select: none;
    span {
      display: block;
      color: #666;
      line-height: 35px;
      cursor: default;
    }
    .index {
      width: 5%;
      text-align: center;
      color: #999;
    }
    .action {
      width: 5%;
      text-align: center;
    }
    .songName {
      width: 73%;
      color: black;
      display: flex;
      i {
        font-style: normal;
        display: block;
      }
      .songname {
        max-width: 200px;
        overflow: hidden;
        word-wrap: break-word; /*强制换行*/
        overflow: hidden; /*超出隐藏*/
        text-overflow: ellipsis; /*隐藏后添加省略号*/
        white-space: nowrap; /*强制不换行*/
      }
      .vip {
        width: 20px;
        height: 12px;
        color: #ff7a9e;
        margin-top: 1px;
        margin-left: 2px;
        i {
          font-size: 28px;
        }
      }
      .icon {
        margin-left: 5px;
        margin-top: 11px;
        cursor: default;
        width: 20px;
        height: 12px;
        color: #ff7a9e;
        cursor: pointer;
        i {
          margin-top: -10px;
          font-size: 16px;
          text-align: center;
        }
      }
      .vip {
        font-size: 12px;
      }
      .icon:hover {
        color: #f39db4;
      }
    }
    .time {
      width: 17%;
      color: #999;
      overflow: hidden;
      word-wrap: break-word; /*强制换行*/
      overflow: hidden; /*超出隐藏*/
      text-overflow: ellipsis; /*隐藏后添加省略号*/
      white-space: nowrap; /*强制不换行*/
    }
  }
  li:nth-child(2n-1) {
    background-color: rgb(249, 249, 249);
  }
  .item:hover {
    background-color: rgb(240, 241, 242);
  }
  .item .action:hover {
    color: black;
  }
}
img {
  width: 150px;
  height: 150px;
  border-radius: 6px;
}
.album {
  width: 93%;
  margin: 10px auto 40px auto;
  display: flex;
  justify-content: space-between;
}
h4 {
  margin: 0;
  margin-bottom: 10px;
}
.songList {
  width: 70%;
  position: relative;
}
.loadMore {
  display: block;
  cursor: pointer;
  margin: 0 auto 30px auto;
  font-size: 12px;
  color: #999;
  width: 100px;
}
.loadMore:hover {
  color: black;
}
.getAllHot {
  display: block;
  cursor: pointer;
  position: absolute;
  right: -15px;
  bottom: -17px;
  font-size: 12px;
  color: #999;
  width: 100px;
}
.getAllHot:hover {
  color: black;
}
</style>